<template>
  <!--视频窗口展示-->
  <div id="playWnd" class="playWnd w100 h100"></div>
</template>
<script>
import axios from '@/utils/request'
import { ElMessageBox } from 'element-ui'

export default {
  props: {
    shipinList: {
      type: Array,
      required: false
    },
    shipinbj: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      info:{
        appkey:'28095238',
        secret:'UAn96MWn9EmQg6g4oT49',
        ip:'10.132.24.80',
      },
      selectvd: 1,
      defaultProps: {
        children: 'childs',
        label: 'name',
        online: 'online'
      },
      suo: false,
      initCount: 0,
      pubKey: '',
      oWebControl: null,
      W: 0,
      H: 0
    }
  },
  watch: {
    shipinList: {
      handler(newValue, oldValue) {
        setTimeout(() => {
          this.getWH()
          this.initPlugin(this.shipinList)
        }, 2000)
      },
      deep: true
    }
  },
  created(){
this.getconfigList()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.getWH()
    this.initPlugin(this.shipinList)
  },
  beforeDestroy() {
    if (this.oWebControl != null) {
      this.closeMonitor()
    }
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    getconfigList(){
      axios.post('/system/config/getValues', ['login_title', 'back_name', 'doc_title','imgname','biurl','backurl','hk_config']).then((res) => {
        if(res.data){
let val=res.data.hk_config.split('&')
this.info.appkey=val[0]
this.info.secret=val[1]
this.info.ip=val[2]
        }
    // store.state.pages.meikuang_info.back_name = res.data.back_name
    // store.state.pages.meikuang_info.login_title = res.data.login_title
    // store.state.pages.meikuang_info.doc_title = res.data.doc_title
    // store.state.pages.meikuang_info.backurl = res.data.backurl
    // store.state.pages.meikuang_info.biurl = res.data.biurl
    // store.state.pages.meikuang_info.hk_config = res.data.hk_config
    // document.title = store.state.pages.meikuang_info.doc_title
    // var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    // link.type = 'image/x-icon';
    // link.rel = 'shortcut icon';
    // link.href ='http://'+ res.data.backurl+'/resourse/'+res.data.imgname
    // document.getElementsByTagName('head')[0].appendChild(link);
    // initWebsocket(res.data.backurl)
})
    },
    initPlugin() {
      this.oWebControl = new WebControl({
        szPluginContainer: "playWnd",
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
        cbConnectSuccess: () => {
          this.oWebControl.JS_StartService("window", {
            dllPath: "./VideoPluginConnect.dll"
          }).then(() => {
            this.oWebControl.JS_SetWindowControlCallback({
              cbIntegrationCallBack: this.cbIntegrationCallBack
            });
            this.oWebControl.JS_CreateWnd("playWnd", this.W, this.H).then(() => {
              this.init();
            });
          }, () => { });
        },
        cbConnectError: () => {
          this.oWebControl = null;
          // WebControl.JS_WakeUp("VideoWebPlugin://");
          // ElMessageBox.confirm(
          //   '是否下载插件？',
          //   '提示',
          //   {
          //     confirmButtonText: '确定',
          //     cancelButtonText: '取消',
          //     type: 'warning',
          //   }
          // ).then(() => {
          //   window.open("/file-download/VideoWebPlugin.exe", "_blank");
          // })
          this.$msgbox.confirm('是否下载插件？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            window.open("/file-download/VideoWebPlugin.exe", "_blank");
          }).catch(() => { });
        },
        cbConnectClose: (bNormalClose) => {
          this.oWebControl = null;
        }
      });
    },
    moveMonitor(iWidth, iHeight) {
      this.oWebControl.JS_Resize(iWidth, iHeight);
    },
    init() {
      this.getPubKey(() => {
        var appkey = this.info.appkey;
        var secret = this.setEncrypt(this.info.secret);
        var ip = this.info.ip;
        var playMode = 0;
        var port = 443;
        var snapDir = "D:\\SnapDir";
        var videoDir = "D:\\VideoDir";
        var layout = "2x2";
        var enableHTTPS = 1;
        var encryptedFields = 'secret';
        var showToolbar = 1;
        var showSmart = 1;
        var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";

        this.oWebControl.JS_RequestInterface({
          funcName: "init",
          argument: JSON.stringify({
            appkey: appkey,
            secret: secret,
            ip: ip,
            playMode: playMode,
            port: port,
            snapDir: snapDir,
            videoDir: videoDir,
            layout: this.shipinbj ? this.shipinbj : layout,
            enableHTTPS: enableHTTPS,
            encryptedFields: encryptedFields,
            showToolbar: showToolbar,
            showSmart: showSmart,
            buttonIDs: buttonIDs
          })
        }).then((oData) => {
          this.oWebControl.JS_Resize(this.W, this.H);
          for (let i = 0; i < this.shipinList.length; i++) {
            this.startPreview(this.shipinList[i], i + 1);
          }
        });
      });
    },
    getPubKey(callback) {
      this.oWebControl.JS_RequestInterface({
        funcName: "getRSAPubKey",
        argument: JSON.stringify({
          keyLength: 1024
        })
      }).then((oData) => {
        if (oData.responseMsg.data) {
          this.pubKey = oData.responseMsg.data;
          callback()
        }
      })
    },
    cbIntegrationCallBack(oData) {
      if (oData.responseMsg.type === 1) {
        this.selectvd = oData.responseMsg.msg.wndId
      }
    },
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.pubKey);
      return encrypt.encrypt(value);
    },
    handleScroll(e) {
      let wind = document.getElementById("playWnd");
      this.oWebControl.JS_Resize(wind.offsetWidth, wind.offsetHeight);
    },
    startPreview(cameraIndexCode, wndId) {
      var streamMode = 0;
      var transMode = 1;
      var gpuMode = 0;
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode,
          streamMode: streamMode,
          transMode: transMode,
          gpuMode: gpuMode,
          wndId: wndId
        })
      })
    },
    getWH() {
      let dom = document.getElementById('playWnd')
      let wh = dom.getBoundingClientRect()
      this.W = wh.width
      this.H = wh.height
    },
    closeMonitor() {
      if (this.oWebControl.szWndId) {
        this.oWebControl.JS_HideWnd();
        this.oWebControl.JS_Disconnect().then(() => { }, () => { });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.hi {
  width: 20px !important;
  overflow-y: hidden !important;
}
.jiantou {
  margin-top: 50vh;
  transform: translateY(-100%);
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #198FFF !important;
}
.el-tree-node__content:hover {
  background-color: #198FFF !important;
}
.el-tree-node__content {
  background: #162440;
}
.gun::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  -webkit-appearance: none;
  background: #f1f1f1;
}
.gun::-webkit-scrollbar-thumb {
  height: 5px;
  border: 1px solid transparent;
  border-top: 0;
  border-bottom: 0;
  border-radius: 6px;
  background-color: #ccc;
  background-clip: padding-box;
}
.gun::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}
</style>
